/**
 * 学习目标：使用条件渲染
 * 方式：通过JS来控制
 * 1. if else语句
 * 2. 三元运算符
 * 3. 逻辑运算符
 */
import React from 'react';
import ReactDOM from 'react-dom';

// 1. if else语句
const isLoadig = true;
// const loadData = () => {
//   if (isLoadig) {
//     return <div>数据正在加载....</div>;
//   } else {
//     return <div>数据已经加载完成</div>;
//   }
// };

// 2. 三元运算符
// const loadData = () => {
//   return isLoadig ? <div>数据正在加载....</div> : <div>数据已经加载完成</div>;
// };

// 3. 逻辑运算符
const loadData = () => {
  return isLoadig && <div>数据正在加载....</div>;
};

const divNode = <h1>{isLoadig && <div>数据正在加载....</div>}</h1>;

ReactDOM.render(divNode, document.getElementById('root'));
